<template>
    <div>
        <a-input-check-box v-model:value="favs" :items="favItems" />
    </div>
    <pre
        class="language-html"
    ><code>{{ `<a-input-check-box v-model:value="favs" :items="favItems" />` }}</code></pre>
    <pre class="language-javascript"><code>{{ `export default {
    data() {
        return {
            favs: [],
            favItems: [
                { text: '香蕉', value: 1 },
                { text: '苹果', value: 2 },
                { text: '梨子', value: 3 },
                { text: '葡萄', value: 4, disabled: true },
            ],
        }
    },
}` }}</code></pre>
    <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
        <p>{{ type.name }}</p>
        <a-table
            :headerList="type.headerList"
            :dataList="type.dataList"
        ></a-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            favs: [],
            favItems: [
                { text: '香蕉', value: 1 },
                { text: '苹果', value: 2 },
                { text: '梨子', value: 3 },
                { text: '葡萄', value: 4, disabled: true },
            ],
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'color', remark: '主题色', type: 'default | primary | secondary | success | warning | error', default: 'default' },
                        { name: 'disabled', remark: '是否禁用', type: 'boolean', default: 'false' },
                        { name: 'size', remark: '尺寸', type: 'xs | s | m | l | xl', default: 'm' },
                        { name: 'sharp', remark: '是否尖角', type: 'boolean', default: 'false' },
                        { name: 'rules', remark: '表单验证规则', type: 'Array<{name: minLength | maxLength | func, value: number | Function | any, errorMessage: string}>', default: '[]' },
                        { name: 'value', remark: '值', type: 'Array', default: '[]' },
                        { name: 'plain', remark: '是否朴素样式', type: 'boolean', default: 'false' },
                        { name: 'items', remark: '待选项列表', type: 'Array', default: '[]' },
                        { name: 'getTextFunc', remark: '获取文字的方法', type: 'Function', default: 'a => a.text' },
                        { name: 'getValueFunc', remark: '获取值的方法', type: 'Function', default: 'a => a.value' },
                        { name: 'getDisabledFunc', remark: '获取待选项是否被禁用的方法', type: 'Function', default: 'a => a.disabled' },
                    ],
                },
                {
                    name: 'emits',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'params', text: '参数' },
                    ],
                    dataList: [
                        { name: 'update:value', remark: '值发生变化', params: 'Array' },
                        { name: 'validate', remark: '输入验证', params: '[boolean, string]' },
                    ],
                }
            ]
        }
    },
}
</script>